<template>
  <div class="header1">
    <span class="backicon">
      <span v-if="pathname == 'item'" class="page-header-back" @click="goback">
      </span>
    </span>
    <span><slot></slot> </span>
    <span class="tb">
      <span class="tb2" v-if="pathname !== 'item'">
      <img src="../../assets/TB1.png" />
      </span>
    </span> 
  </div>
</template>

<script>
export default {
  name: "header1",
  data: function () {
    return {
      pathname: "",
    };
  },
  mounted() {
    console.log(this.$route);
    //获取了当前路径的名称
    this.pathname = this.$route.name;
  },
  methods: {
    goback() {
      //返回上一页
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.header1 {
  font-size: 18px;
}
/* .header1.tb{
    
} */
.header1 .tb2{
  position: relative;
  
}
.header1 .tb2 img{
  position: absolute;
  margin-top: 10px;
  margin-left: 15px;
}
.backicon {
  position: relative;
}
.page-header-back:before {
  width: 20px;
  height: 20px;
  content: "";
  display: flex;
  position: absolute;
  top: 15px;
  /* width: 100%; */
  /* height: 100%; */
  box-sizing: border-box;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(45deg);
  left: 20px;
}
/* scoped 只在该组件起作用 */
.header1 {
  width: 100%;
  height: 50.5px;
  line-height: 50.5px;
  display: flex;
  background: #e54847;
  color: #fff;
}
.header1 span:nth-of-type(1),
.header1 span:nth-of-type(3) {
  width: 15%;
}
.header1 span:nth-of-type(2) {
  width: 70%;
  text-align: center;
}
</style>